<template>
  <div class="lottery-share">
    <a @click="share(3)" href="javascript: void 0;" class="btn" onclick="_hmt.push(['_trackEvent', 'Wechatshare', 'click', 'wechat share'])">
      <img src="~pages/app/assets/images/share/wechat-app-message.png">
    </a>
    <a @click="share(4)" href="javascript: void 0;" class="btn" onclick="_hmt.push(['_trackEvent', 'Friendsshare', 'click', 'weixinFrinds share'])">
      <img src="~pages/app/assets/images/share/wechat-timeline.png">
    </a>
    <a @click="share(1)" href="javascript: void 0;" class="btn" onclick="_hmt.push(['_trackEvent', 'QQshare', 'click', 'QQ share'])">
      <img src="~pages/app/assets/images/share/qq.png">
    </a>
    <a @click="share(2)" href="javascript: void 0;" class="btn" onclick="_hmt.push(['_trackEvent', 'Weiboshare', 'click', 'weibo share'])">
      <img src="~pages/app/assets/images/share/weibo.png">
    </a>
  </div>
</template>

<script>
  import merge from 'lodash.merge';
  import shareSDK from 'common/js/share-sdk';

  function shareCopy(platform, { bigo, name, imgUrl }) {
    const base = `http://${location.host}${location.pathname}`;
    const domain = `http://${location.host}`;
    const url = `${base}share-${bigo? 'bigo': 'tks'}.html`;
    const normalImgUrl = 'http://store-image.snailvr.com/t3-lottery-h5/moments.jpg';
    imgUrl = domain + imgUrl;
    const bigoCopy = [
      {
        title: `天啦噜，看风尚大赏还能中大奖！`,
        imgUrl,
        url,
        desc: '下载微鲸VR APP，抢SNH48周边奖品，用最新潮的方式观看11月5日SNH48第二届风尚大赏。'
      },
      {
        title: `#微鲸VR直播# 天啦噜，看风尚大赏还能中大奖！下载微鲸VR APP，用最新潮的方式观看11月5日#SNH48年度风尚大赏# @微鲸VR @SNH48`,
        imgUrl,
        url,
        desc: `#微鲸VR直播# 天啦噜，看风尚大赏还能中大奖！下载微鲸VR APP，用最新潮的方式观看11月5日#SNH48年度风尚大赏# @微鲸VR @SNH48`
      },
      {
        title: `天啦噜，看风尚大赏还能中大奖`,
        imgUrl,
        url,
        desc: '下载微鲸VR APP，抢SNH48周边奖品，用最新潮的方式观看11月5日SNH48第二届风尚大赏。'
      },
      {
        title: `天啦噜，看风尚大赏还能中大奖！下载微鲸VR APP，抢SNH48周边奖品，用最新潮的方式观看11月5日SNH48第二届风尚大赏。`,
        imgUrl,
        url,
        desc: '天啦噜，看风尚大赏还能中大奖！下载微鲸VR APP，抢SNH48周边奖品，用最新潮的方式观看11月5日SNH48第二届风尚大赏。'
      }
    ];
    const normalCopy = [
      {
        title: '看SNH48风尚大赏，就上微鲸VR！',
        imgUrl: normalImgUrl,
        url,
        desc: '下载微鲸VR APP，抢SNH48周边奖品，用最新潮的方式观看11月5日SNH48第二届风尚大赏。'
      },
      {
        title: `#微鲸VR直播# 下载微鲸VR APP，抢SNH48周边奖品，用最新潮的方式观看11月5日#SNH48年度风尚大赏# @微鲸VR @SNH48 `,
        imgUrl: normalImgUrl,
        url,
        desc: `#微鲸VR直播# 下载微鲸VR APP，抢SNH48周边奖品，用最新潮的方式观看11月5日#SNH48年度风尚大赏# @微鲸VR @SNH48`
      },
      {
        title: '看SNH48风尚大赏，就上微鲸VR！',
        imgUrl: normalImgUrl,
        url,
        desc: '下载微鲸VR APP，抢SNH48周边奖品，用最新潮的方式观看11月5日SNH48第二届风尚大赏。'
      },
      {
        title: '看SNH48风尚大赏，就上微鲸VR！下载微鲸VR APP，抢SNH48周边奖品，用最新潮的方式观看11月5日SNH48第二届风尚大赏。',
        imgUrl: normalImgUrl,
        url,
        desc: '看SNH48风尚大赏，就上微鲸VR！下载微鲸VR APP，抢SNH48周边奖品，用最新潮的方式观看11月5日SNH48第二届风尚大赏。'
      }
    ];
    if (bigo) {
      return bigoCopy[platform - 1];
    }
    return normalCopy[platform - 1];
  }

  export default {
    props: {
      data: {
        type: Object,
        default: () => ({})
      }
    },
    methods: {
      share(platform) {
        // 1 QQ
        // 2 微博
        // 3 微信
        // 4 朋友圈
        const message = merge(shareCopy(platform, this.data), { platform });
        shareSDK.share(message);
        if (shareSDK.isDeprecated()) {
          this.$emit('success', platform);
        }
      }
    },
    mounted() {
      this.token = shareSDK.on('success', ({ platform }) => {
        this.$emit('success', platform);
      });
    },
    beforeDestroy() {
      shareSDK.off(this.token);
    }
  }
</script>

<style scoped lang="scss">
  .lottery-share {
    text-align: center;
    font-size: 0.36rem;
    a {
      width: 1.9rem;
      height: 0.98rem;
      display: inline-block;
      &:not(:last-child) {
        margin-right: 0.33rem;
      }
    }
  }
</style>
